<!-- 识别记录数据表编辑弹窗 -->
<template>
  <el-dialog
    :title="isUpdate?'审核识别记录':'添加识别记录数据表'"
    :visible="visible"
    width="760px"
    :destroy-on-close="true"
    :lock-scroll="false"
    @update:visible="updateVisible">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="100px">


      <el-form-item
        label="识别图片:"
        prop="name">
        <div class="image">
          <img :src="form.dentify.url" width="300"/>
          <div class="boder-box" :style="{
				'top': `${form.y1*imgSale}px`,
				'left':`${form.x1*imgSale}px`,
				'width': `${(form.x2-form.x1)*imgSale}px`,
				'height': `${(form.y2-form.y1)*imgSale}px`,
			}"></div>
        </div>
      </el-form-item>
      <el-form-item
        label="名称:"
        prop="name">
        <el-select
          v-model="form.name"
          filterable
          remote
          reserve-keyword
          placeholder="请输入关键词"
          :remote-method="remoteMethod"
          :loading="loadings"
          @change="selectName">
          <el-option
            v-for="item in options"
            :label="item.title"
            :value="item.id">
          </el-option>
        </el-select> <span style="font-size:14px;color:#ccc">(输入关键词搜索知识库数据)</span>
      </el-form-item>
      <el-form-item
        label="知识库:"
        >
        <div class="zsk">
          <div><label>名称：</label>{{item.title}}</div>
          <div><label>类型：</label>{{item.cateName}}</div>
          <div v-if="item.lname"><label v-if="item.cateId==4">拉丁名：</label><label v-else>学名：</label><span  v-html="item.lname"></span></div>

          <div v-if="item.distributionW"><label>分布：</label>{{item.distributionW}}</div>
          <div v-else-if="item.distributionN"><label>分布：</label>{{item.distributionN}}</div>
          <div v-if="item.hazard"><label>为害：</label>{{item.hazard}}</div>
          <div v-if="item.enemy"><label>天敌：</label>{{item.enemy}}</div>
          <div v-if="item.content"><label>控制技术措施：</label><span  v-html="item.content"></span></div>
        </div>

      </el-form-item>
      <el-form-item
        label="位置信息:"
      >
        <div class="zsk">
          <div><label>经纬度：</label>{{form.dentify.latitude}},{{form.dentify.longitude}}</div>
          <div v-if="form.dentify.address"><label>地址：</label>{{form.dentify.address}}</div>
          <div><label>温度：</label>{{weather.temp}}℃</div>
          <div><label>湿度：</label>{{weather.humidity}}%rh</div>
          <div><label>气压：</label>{{weather.pressure}}P</div>
        </div>

      </el-form-item>
      <el-form-item label="状态:">
        <el-radio-group
          v-model="form.status">
          <el-radio :label="0">待审核</el-radio>
          <el-radio :label="1">已审核</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button
        type="primary"
        @click="save"
        :loading="loading">保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'IdentifyDataEdit',
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  data() {
    return {
      // 表单数据
      form: Object.assign({}, this.data),
      // 表单验证规则
      rules: {
        name: [
          {required: true, message: '请输入', trigger: 'blur'}
        ],

      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      imgSale: 1, //图片比例
      options: [],
      value: [],
      list: [],
      loadings: false,
      states: [],
      item:{},
      weather:{},
    };
  },
  watch: {
    data() {
      if (this.data) {
        this.form = Object.assign({}, this.data);
        this.item = this.form.article;
        this.form.aid = this.item.id;
        this.weather =  JSON.parse(this.form.dentify.weather);
        console.log(this.weather);
        this.isUpdate = true;

      } else {
        this.form = {};
        this.isUpdate = false;
      }
      this.getImgInfo();
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    selectName(value) {
      this.item = this.list.find((item) => {
        return item.id === value
      })
      this.form.aid = this.item.id;
      this.form.name = this.item.title;
    },
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter(item => {
            return item.title.toLowerCase()
              .indexOf(query.toLowerCase()) > -1;
          });
        }, 10);
      } else {
        this.options = [];
      }
    },
    getList(){
      this.$http('/article/index?cateId=0&page=1&limit=1000').then(res => {
        this.states = res.data.data.records;
        this.list = res.data.data.records;

      }).catch(e => {
        this.loading = false;
        this.$message.error(e.message);
      });
    },
    getImgInfo() {
      var that = this;
      // 创建实例对象
      var img = new Image();
      img.src = this.form.dentify.url;
      img.onload = function () {
        that.imgSale = 300 / img.width;

      }
    },
    /* 保存编辑 */
    save() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$http['put']('/identifydata/edit', this.form).then(res => {
            this.loading = false;
            if (res.data.code === 0) {
              this.$message.success(res.data.msg);
              if (!this.isUpdate) {
                this.form = {};
              }
              this.updateVisible(false);
              this.$emit('done');
            } else {
              this.$message.error(res.data.msg);
            }
          }).catch(e => {
            this.loading = false;
            this.$message.error(e.message);
          });
        } else {
          return false;
        }
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    }
  }
}
</script>

<style scoped>
.image{
  width: 300px;
  position: relative;
}
.boder-box{
  position: absolute;
  border: 1px solid rgba(34, 255, 85, 1.0);
  box-shadow: 1px 0px 50px 1px rgba(34, 255, 85, 0.3);
}

.zsk  label{
  font-weight: bold;
}
em:not{
  font-style: italic!important;
}
</style>
